import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TouchableWithoutFeedback, ScrollView, Dimensions } from "react-native";
import CustomerHeader from "../../widget/customerHeader";
import img_arr from "../../util/img_arr";
import Swiper from "react-native-swiper";
import {WebView} from 'react-native-webview'
import  LinearGradient from 'react-native-linear-gradient';
import * as RootNavigation from '../../../App'

export default class ProdDetail extends Component{
  constructor(props) {
    super(props);
    this.state={
      backIconIsWhite:true,
      bannerList:['https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png'],
      height: 0,
      value:'我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html' +
        '标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展示富文本，包括img、span、div等基本html标签；2、控制富文本的整体样式，比如业务配置的图片大小不一，我们要统一已屏幕宽度为基准，' +
        '高度自适应。我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html' +
        '标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展示富文本，包括img、span、div等基本html标签；2、控制富文本' +
        '的整体样式，比如业务配置的图片大小不一，我们要统一已屏幕宽度为基准，高度自适应。我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html' +
        '标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展示富文本，包括img、span、div等基本html标签；2、控制富文' +
        '本的整体样式，比如业务配置的图片大小不一，我们要统一已屏幕宽' +
        '我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html' +
        '标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展示富文本，包括img、span、div等基本html标签；2、控制富文本' +
        '我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html' +
        '标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展示富文本，包括img、span、div等基本html标签；2、控制富文本的整体样式，比如业务配置的图片大小不一，我们要统一已屏幕宽度为基准，高度自适应。' +
        '' +
        '我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html' +
        '标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展' +
        '示富文本，包括img、span、div等基本html标签；2、控制富文本的整体样式，' +
        '比如业务配置的图片大小不一，我们要统一已屏幕宽度为基准，高度自适应。的整体样' +
        '式，比如业务配置的图片大小不一，我们要统一已屏幕宽度为基准，高度自适应。度为基准，高度自适应。我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html' +
        '标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展示富文本，包括img、span、div等基本html标签；2、控制富文本的整体样式，比如业务配置的图片大' +
        '小不一，我们要统一已屏幕宽度为基准，高度自适应。我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html' +
        '标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展示富文本，包括img、span、div等基本html标签；2、控制富文本的整体样式，比如业务配置的图片大小不一，我们要统一已屏幕宽度为基准，高度自适应。'
    }
  }

  _renderPagination(info){
    return (
      <View style={styles.pagination}>
        <Text style={styles.paginationTxt}>{info+1}<Text style={{color:'rgba(255,255,255,0.5)'}}>/7</Text></Text>
      </View>
    )
  }

  submitOrder(){
    RootNavigation.navigate('SubmitOrder',{})
  }

  _onScroll(event){
    let y=event.nativeEvent.contentOffset.y
    if(y<50){
      this.navBar.setNativeProps({style:{backgroundColor:'rgba(255,255,255,0)'}})
      this.setState({backIconIsWhite:true})
    }
    else{
      this.navBar.setNativeProps({style:{backgroundColor:'rgba(255,255,255,1)'}})
      this.setState({backIconIsWhite:false})
    }
  }

  render() {
    const bannerEle=[]
    this.state.bannerList.forEach((url,index)=>{
      bannerEle.push(
        <TouchableWithoutFeedback style={{flex:1,borderRadius:10,overflow:"hidden"}} key={index}>
          <Image style={{flex:1,overflow:'hidden'}} source={{uri:url}} keyExtractor={url=>url}></Image>
        </TouchableWithoutFeedback>
      )
    })
    const injectedJs = "const meta = document.createElement('meta');meta.setAttribute('content', 'initial-scale=1, maximum-scale=1, user-scalable=0');meta.setAttribute('name', 'viewport');\n" +
      "    document.getElementsByTagName('head')[0].appendChild(meta);let webHeight = document.body.scrollHeight;\n" +
      "    window.ReactNativeWebView.postMessage(webHeight);";
    return(
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <CustomerHeader ref={ref=>this.navBar=ref}
                        canBack={true}
                        style={styles.nav}
                        leftImageView={this.state.backIconIsWhite?img_arr.icon_back_white:img_arr.icon_back_black}
                        leftOnPress={()=>this.props.navigation.pop()}></CustomerHeader>
        <ScrollView scrollEnabled={true} showsVerticalScrollIndicator={false} onScroll={this._onScroll.bind(this)} scrollEventThrottle={10}>
          <View style={styles.banner}>
            <Swiper style={styles.wrapper}
                    showsButtons={false}
                    autoplay={false}
                    renderPagination={this._renderPagination}
            >{bannerEle}</Swiper>
          </View>
          <View style={styles.goodInfo}>
            <View style={styles.flex}>
              <Text style={{color:'#E39354',fontSize:23,fontWeight:'500'}}>2000<Text style={{fontSize:14}}>积分</Text></Text>
              <Text style={styles.sale}>已兑8612份</Text>
            </View>
            <Text style={styles.prodName}>采芝斋江苏苏州特产蛋黄花生 中华老字号旗舰店官
              网江苏特产 蛋黄花生220g</Text>
          </View>
          <View style={{height:10,backgroundColor:'#F6F6F6'}}></View>
          <View style={styles.section}>
            <View style={styles.flexBox}>
              <Image style={styles.verticalLine} source={require('../../img/vertical_Line.png')}></Image>
              <Text style={styles.sectionTitle}>兑换须知</Text>
            </View>
            <Text style={styles.des}>积分一经使用不支持退还，代金券数量有限，先到先得，兑完即止</Text>
          </View>
          <View style={{height:10,backgroundColor:'#F6F6F6'}}></View>
          <View style={[styles.section,{paddingHorizontal:0}]}>
            <View style={[styles.flexBox,{paddingLeft:15}]}>
              <Image style={styles.verticalLine} source={require('../../img/vertical_Line.png')}></Image>
              <Text style={styles.sectionTitle}>商品详情</Text>
            </View>
            <WebView
              style={{
                width: Dimensions.get("window").width,
                height: this.state.height,
              }}
              showsVerticalScrollIndicator={false}
              injectedJavaScript={injectedJs}
              automaticallyAdjustContentInsets={true}
              source={{
                html: `<!DOCTYPE html><html> <style type="text/css">
						.tour_product_explain img{ display: block!important; vertical-align: top!important; width: 100%!important;}
						.tour_product_explain{ padding: 0 15px 20px 15px;}
						.tour_product_explain *{text-align: left!important;
							font-size: 16px!important;
							line-height: 1.3!important;
							font-family: Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei!important;
							float: none!important;
							padding: 0!important;
							position: static!important;
							height: auto!important}
						</style><body><div class="tour_product_explain" id="content">${this.state.value}</div></body></html>`,
              }}
              scalesPageToFit={true}
              javaScriptEnabled={true} // 仅限Android平台。iOS平台JavaScript是默认开启的。
              domStorageEnabled={true} // 适用于安卓a
              scrollEnabled={false}
              onMessage={(event)=>{
                this.setState({ height: +event.nativeEvent.data })
              }}
            />
          </View>
        </ScrollView>
        <View style={styles.footer}>
          <TouchableWithoutFeedback onPress={this.submitOrder}>
            <LinearGradient colors={['#e79c58','#f8da85']} start={{x:0,y:1}} style={styles.convert}>
              <Text style={styles.convertTitle}>您有2000积分，立即兑换</Text>
            </LinearGradient>
          </TouchableWithoutFeedback>
        </View>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  nav:{
    position:'absolute',
    top:0,
    left:0,
    right:0,
    backgroundColor:'rgba(255,255,255,0)',
    zIndex:9999
  },
  banner:{
    height:375,
    backgroundColor:'#fff'
  },
  pagination:{
    position: 'absolute',
    right: 10,
    bottom:15,
    width:44,
    height:20,
    borderRadius:10,
    backgroundColor:'rgba(0,0,0,0.6)'
  },
  paginationTxt:{
    color:'#fff',
    textAlign:'center',
    lineHeight:20,
    flex:1,
    fontSize:12
  },
  goodInfo:{
    paddingVertical:25,
    paddingHorizontal:15
  },
  flex:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  sale:{
    color:'#999999',
    fontSize:11,
  },
  prodName:{
    color:'#333333',
    fontWeight:'500',
    lineHeight:25,
    fontSize:15,
    marginTop:16
  },
  /*section*/
  section:{
    paddingHorizontal: 14,
    paddingVertical: 18
  },
  flexBox:{
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  verticalLine:{
    width: 3,
    height:16
  },
  sectionTitle:{
    color:'#111111',
    fontSize:14,
    fontWeight: '500',
    marginLeft:6
  },
  des:{
    color:'#888888',
    fontSize:13,
    lineHeight:20,
    marginTop:13
  },
  footer:{
    height:88,
    backgroundColor:'#fff'
  },
  convert:{
    height:44,
    borderRadius:22,
    marginHorizontal:24,
    marginTop:8
  },
  convertTitle:{
    color:'#fff',
    lineHeight:44,
    flex:1,
    fontSize:16,
    textAlign: 'center'
  }
})


